<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML MIDI Player</title>

    <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.22.0/es6/core.js"></script>
    <script src="./dist/midi-player.min.js"></script>

    <style>
      #player2::part(control-panel) {
        background: #ff5;
        border: 2px solid #000;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h1><a href="https://github.com/cifkao/html-midi-player">HTML MIDI Player</a></h1>

    <midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid" sound-font loop visualizer=".visualizer" id="player1"></midi-player>
    <midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid" visualizer=".visualizer" id="player2"></midi-player>

    <midi-visualizer type="piano-roll" class="visualizer" id="pianoRollVisualizer"></midi-visualizer>
    <midi-visualizer type="waterfall" class="visualizer" id="waterfallVisualizer"></midi-visualizer>
    <midi-visualizer type="staff" class="visualizer" id="staffVisualizer"></midi-visualizer>

    <midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/notfound.mid" sound-font></midi-player>
    <midi-player sound-font></midi-player>

    <script>
      window.addEventListener('DOMContentLoaded', function() {
        for (const player of document.querySelectorAll('midi-player')) {
          for (const event of ['load', 'start', 'stop', 'loop']) {
            player.addEventListener(event, console.log);
          }
        }

        const waterfallVisualizer = document.querySelector('#waterfallVisualizer');
        waterfallVisualizer.config = {
          showOnlyOctavesUsed: true
        };
      });
    </script>
  </body>
</html>
